{extend name="layout/base"}

{block name="content"}
<div class="layui-form layui-form-pane">
    <div class="layui-tab">
        <div class="layui-tab-content category_content">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <label class="layui-form-label">栏目名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="cate_name" class="layui-input" placeholder="栏目名称" required>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">所属栏目</label>
                    <div class="layui-input-block category_box">
                        <input type="text" class="layui-input" placeholder="选择栏目" required readonly="true" id="catelist">
                        <input type="hidden" name="cate_pid" id="cateval">
                        <ul id="category" class="categorylist"></ul>               
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">链接</label>
                    <div class="layui-input-block">
                        <input type="text" name="cate_url" class="layui-input" placeholder="url地址" required>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="number" class="layui-input" min="0" value="0" name="cate_priority" title="排序" required>
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">是否显示</label>
                    <div class="layui-input-block">
                        <input type="radio" name="cate_status" checked value="1" title="是">
                        <input type="radio" name="cate_status" value="0" title="否">
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">是否推荐</label>
                    <div class="layui-input-block">
                        <input type="radio" name="cate_recommend" value="1" title="是">
                        <input type="radio" name="cate_recommend" value="0" title="否" checked>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button lay-filter="add" lay-submit class="layui-btn layui-btn-sm">提交</button>
        </div>
    </div>
</div>
<script>
    layui.use(['jquery', 'form', 'element', 'tree'], function ($, form, element, tree) {
        // 选择栏目
        $('#catelist').click(function () {
            $('.categorylist').show()
        })
        getData()        
        form.on('submit(add)', function (obj) {
            $.post({
                url: "{:url('')}",
                data: obj.field,
                success: function(res){
                    layer.msg(res.msg, {
                        icon: res.code ===0 ? 6: 5
                    });
                    parent.location.reload()
                }
            });

        });    
        function getData () {
            var node = [];
            $.ajax({
                url: '{:url("lists")}',
                type: "POST",
                datatype: 'json',
                success: function (res) {
                    var data = res.data;
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].cate_depth == 1) { 
                            node.push({
                                title:data[i].cate_name,
                                id: data[i].cate_id,
                                pid: data[i].cate_pid,
                                children: []
                            });
                        }
                        for (var j = 0; j<node.length; j++) {
                            if (data[i].cate_depth == 2) {
                                if (node[j].id == data[i].cate_pid) {
                                    node[j].children.push({
                                        title:data[i].cate_name,
                                        id: data[i].cate_id,
                                        pid: data[i].cate_pid,
                                        children: []
                                    })
                                }
                            }                            
                            for (var k = 0; k<node[j].children.length; k++) {
                                if (data[i].cate_depth == 3) {
                                    if (node[j].children[k].id == data[i].cate_pid) {                        
                                        node[j].children[k].children.push({
                                            title:data[i].cate_name,
                                            id: data[i].cate_id,
                                            pid: data[i].cate_pid,
                                            children: []
                                        })
                                    }
                                }                                
                            }
                        }                    
                    }
                    // node.unshift({id: 0, name: '顶级栏目'})
                    tree.render({
                        elem: '#category',
                        data: node,
                        click: function (item) {
                            $('#catelist').val(item.data.title);
                            $('#cateval').val(item.data.id)
                            $('.categorylist').hide()
                        }
                    })
                    // layui.tree({
                    //     elem: '#category',
                    //     nodes: node,
                    //     click: function (item) {
                    //         $('#catelist').val(item.name);
                    //         $('#cateval').val(item.id)
                    //         $('.categorylist').hide()
                    //     }
                    // })
                }                
            })             
        }
    });    
</script>
{/block}